import { Flex } from "antd-mobile";

export default function Groups(props) {
  const groups = [
    { title: "漂亮的房子", color: "#d51414", count: 100 },
    { title: "很大的房子", color: "#ff6655", count: 88 },
    { title: "帅气的房子", color: "#37f68e", count: 23 },
    { title: "漂亮的房子", color: "#123438", count: 120 },
  ];

  return (
    <div style={{width:'100%','padding':'10px'}}>
      <Flex align="center" justify="between">
        <Flex.Item style={{textAlign:"left",fontSize:'16px',fontWeight:"700"}}>租房小猪</Flex.Item>
        <Flex.Item style={{textAlign:'right'}}>更多</Flex.Item>
      </Flex>
      <div
        className="groups"
        style={{
          width: "100%",
          display: "flex",
          justifyContent: "space-between",
          flexWrap: "wrap",
        }}
      >
        {groups.map((res, index) => (
          <GroupItem dataItem={res} key={index}></GroupItem>
        ))}
      </div>
    </div>
  );
}

function GroupItem({ dataItem }) {
  return (
    <div
      className="groupItem"
      style={{
        background: dataItem.color,
        width: "49%",
        height: "80px",
        borderRadius: "6px",
        textAlign: "center",
        marginTop: "8px",
      }}
    >
      <h3>{dataItem.title}</h3>
      <h4> 有{dataItem.count}家房子等你来</h4>
    </div>
  );
}
